import type {
  ReactNode,
  MouseEvent,
  DetailedHTMLProps,
  ButtonHTMLAttributes,
} from 'react'
import type { NativeProps } from '../../utils/native-props'

type NativeButtonProps = DetailedHTMLProps<
  ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
>

export type ButtonProps = {
  /** 是否是块级元素. default: `false` */
  block?: boolean;
  /** 是否禁用. default: `false` */
  disabled?: boolean;
  /** 填充模式. default: `'solid'` */
  fill?: 'solid' | 'outline' | 'none';
  /** 是否处于加载状态. `auto`模式会监听 onClick 的 Promise 状态自动更新loading. default: `false` */
  loading?: boolean | 'auto';
  /** 加载状态下显示的文字. default: `''` */
  loadingText?: string;
  /** 加载状态下的 icon 图标. default: `<DotLoading color='currentColor' />` */
  loadingIcon?: ReactNode
  /** 点击事件. default: - */
  onClick?: (
    event: MouseEvent<HTMLDivElement, MouseEvent>
  ) => void | Promise<any>
  /** 按钮类型. default: `'default'` */
  pattern?: 'primary' | 'default' | 'success' | 'danger' | 'warning';
  /** 按钮形状. default: `'default'` */
  shape?: 'default' | 'rounded' | 'rectangular'
  /** children. */
  children?: ReactNode;
} & NativeProps<
  /** 文字颜色. default: 'var(--rt-color-text)'. globaVariable: '--rt-button-text-color' */
  | '--text-color'
  /** 背景颜色. default: 'var(--rt-color-background)'. globaVariable: '--rt-button-background-color' */
  | '--background-color'
  /** 圆角大小. default: '4px'. globaVariable: '--rt-button-border-radius' */
  | '--border-radius'
  /** 边框宽度. default: '1px'. globaVariable: '--rt-button-border-width' */
  | '--border-width'
  /** 边框样式. default: 'solid'. globaVariable: '--rt-button-border-style' */
  | '--border-style'
  /** 边框颜色. default: 'var(--rt-color-border)'. globaVariable: '--rt-button-border-color' */
  | '--border-color'
> & Pick<NativeButtonProps,
  'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd' | 'id' | 'type'
>

export type ButtonRef = {
  /** nativeElement */
  nativeElement: HTMLButtonElement | null
}
